<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>订单页面</title>

    <head>
        <!-- Import style -->
        <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
        <!-- Import Vue 3 -->
        <script src="//unpkg.com/vue@3"></script>
        <!-- Import component library -->
        <script src="//unpkg.com/element-plus"></script>
        <link rel="stylesheet" href="css/iconfont.css">
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="css/order.css">
        <link rel="shortcut icon" href="image/favicon.ico" type="image/x-icon">
        <script src="js/carousel.js"></script>
    </head>
</head>

<body>
    <div class="generalframework">
        <div class="header">
            <ul>
                <li><a href="/toIndex">首页</a></li>
                <li><a href="/toCollection">收藏中心</a></li>
                <li><a href="/toOrder">我的订单</a></li>
                <li><label for="customer"><img class="icon" src="image/user.png"></label></li>
                <li><a href="/pre_login"><input type="button" value="登录" id="customer"></a></li>
            </ul>
        </div>
        <label style="color: red;" th:text="${error_order}"></label>
        <div class="content" th:object="${order_Car}">
            <div class="content-mid">
                <img src="image/login.jpeg" alt="" width="1000px" height="100px">
                <span class="content-mid-text">订单中心</span>
                <ul class="content-mid-ul" id="myList">
                    <li class="content-mid-ul-li">
                        <div class="content-mid-car">
                            <div class="content-mid-car-img">
                                <!--显示汽车图片-->
                                <img th:src="*{imgURL}" alt="" width="200px" height="90px">
                            </div>
                            <div class="content-mid-car-text">
                                <!--显示汽车名字-->
                                <span style="font-weight: bolder; font-size: 20px;" th:text="*{carName}"></span><br><br>
                                <span style="color: gray;font-size: 15px;">还在准备中.&nbsp;.&nbsp;.&nbsp;</span>
                            </div>
                        </div>

                    </li>
                </ul>
                <label style="color: red;font-family: 'Arial Black';" th:text="${buySuccessMessage}"></label>
            </div>
            <div class="bottom-button">
                <form action="/buyCar">
                    <!--保存汽车对象的id发送给后端，该标签不显示-->
                    <input type="hidden" th:field="*{carId}" name="carId">
                    <button class="button-order" type="submit">立即购买</button>
                </form>
                <form action="/cancelOrder">
                    <button class="button-canel" type="submit">取消订单</button>
                </form>
            </div>
        </div>

    </div>
</body>

</html>